<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>5种奖品</title>
    <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
    <link rel="stylesheet" href="css/index.css">
</head>

<body style="background:#c31d31">
     
   

    <div class="content">


        <div class="tableContent pos"></div>
        <img class="rotated pos play-btn" src="images/zp_z.png" />

        <p class="stop" >  停止 </p>

    </div>
    <!--抽奖页结束-->

     

    <script type="text/javascript" src="src/run.js"></script>
    <script type="text/javascript" src="src/lucky.js"></script>
    <script type="text/javascript" src="src/cirlce.js"></script>
    
    <script >

   

    var oPlayBtn = document.querySelector('.play-btn');
    var oStop = document.querySelector('.stop');


    var cirlce = lucky.cirlce('.tableContent',{
        time:4,         //时间（秒）//默认 5
        areas_number:5, //奖项数    //必填
        target:0,       //中奖目标 （ 0 <= target  && target < areas_number ）//可在 start的时候传参
        initAngle:0,   //初始化角度  //默认 0 //不影响最终结果
        offset:35,      //偏移度数  //默认 0 
        defaulTurns:10, //默认要转的圈数 //默认 10
        easing:Run.Tween.Quad.easeInOut, //缓冲 // 默认 Run.Tween.Quad.easeInOut
        onUpdate:function(n){
            //console.log( n)
        },
        onEnd:function(){
            oPlayBtn.dataset.disable = "";
        }
    });

    //开始 
    oPlayBtn.onclick = function(){
        if(this.dataset.disable == "disable"){return;} 

        cirlce.start(0); // 参数为 中奖目标 ，优先级大于 target

        this.dataset.disable = "disable";
    };

     //停止
    oStop.onclick = function(){
        cirlce.stop('.tableContent'); 
    };


    </script>




</body>
</html>